<template>
	<view class="content">
		<view class="no-date" v-if="scenicList.length == 0">
			暂无收藏
		</view>
		<view v-for="(item, index) in scenicList" :key="index">
			<div class="list" v-if="item.name" >
				<div class="title">{{item.name}}</div>
				<div class="main">
					<img :src="item.picture" alt="" class="scenic">
					<div class="detail">
						<div class="time">{{item.favoriteDate}}</div>
						<div class="number">{{item.address}}</div>
						<div class="price">¥{{ parseFloat(item.price / 100).toFixed(2)}}</div>
					</div>
					<div class="more" @click="goRouter(item.number)">
						<div>详情</div>
						<img src="../../static/img/more-icon.png" alt="">
					</div>
				</div>
				
			</div>
		</view>
		
		
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				status: 'loadmore', // 加载前值为loadmore，加载中为loading，没有数据为nomore
				scenicList:[
					// {
					// 	title:'沈阳景区名称XXXXXX',
					// 	time:'2024-01-01 19:30',
					// 	addres:'辽宁省沈阳市浑南区',
					// 	price:'￥180起',
					// 	src:"../../static/img/scenic.png"
					// },
					// {
					// 	title:'沈阳景区名称XXXXXX',
					// 	time:'2024-01-02 19:30',
					// 	addres:'辽宁省沈阳市浑南区',
					// 	price:'￥280元起',
					// 	src:"../../static/img/scenic.png"
					// },
					// {
					// 	title:'沈阳景区名称XXXXXX',
					// 	time:'2024-01-03 19:30',
					// 	addres:'辽宁省沈阳市浑南区',
					// 	price:'￥380元起',
					// 	src:"../../static/img/scenic.png"
					// },{
					// 	title:'沈阳景区名称XXXXXX',
					// 	time:'2024-01-04 19:30',
					// 	addres:'辽宁省沈阳市浑南区',
					// 	price:'￥480元起',
					// 	src:"../../static/img/scenic.png"
					// }
				]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				let data = {
					"userId": uni.getStorageSync('openId').userId,
				}
				this.status = 'loading';
				this.$http({
					url:this.$myApi.favoritesList + '?customerId=' + data.userId,
					method:'GET',
					hideLoading:true,
					data:{},
					success:res=>{
						res.rows = res.rows.sort((a, b) => new Date(b.favoriteDate) - new Date(a.favoriteDate))
						this.scenicList = res.rows;
						console.log('是否显示----------',res)
						
					},
					fail:err=>{
						console.log(err);
					},complete:e=>{
						this.status = 'nomore'
					}
				})
			},
			// 路由跳转
			goRouter(id) {
				uni.navigateTo({
					// url: url
					url: `/pages/myHomeDetail/index?number=${id}`
				})
			},
			
			},
	}
</script>
<style>
page {
	background-color:#F6F9FF;
	}
	
</style>
<style lang="scss" scoped>
.content{
	width: 100%;
	.list{
		width: 690rpx;
		height: 246rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin-left: 30rpx;
		margin-top: 20rpx;
		position: relative;
		// padding: 20rpx 0rpx 20rpx 0rpx;
		.title{
			// width: 378rpx;
			// height: 42rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #1C1C1C;
			line-height: 30rpx;
			margin-left: 26rpx;
			margin-top: 34rpx;
			position: absolute;
			height: 30rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 646rpx;
		}
		.main{
			display: flex;
			.scenic{
				width: 160rpx;
				height: 110rpx;
				margin-left: 26rpx;
				margin-top: 86rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
			.detail{
				margin-top: 74rpx;
				margin-left: 37rpx;
				.time{
					width: 368rpx;
					height: 40rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #212121;
					margin-top: 5rpx;
				}
				.number{
					width: 440rpx;
					height: 40rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #212121;
					margin-top: 5rpx;
					
					height: 62rpx !important;
					margin-top: -6rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2 !important;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
				}
				.price{
					width: 368rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #212121;
					margin-top: 5rpx;
				}
			}
			.more{
				display: flex;
				margin-top: 194rpx;
				position: absolute;
				right: 24rpx;
				
				
				img {
					width: 24rpx;
					height: 24rpx;
					margin-top: 10rpx;
					margin-left: 15rpx;
					
				}
			}
		}
	}
	
	.no-date {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #525252;
		line-height: 0px;
		wdith: 100%;
		text-align: center;
		margin-top: 520rpx;
	}
}


</style>

<style> 
page {
	background-color: #eee;
}
</style>